<script lang="ts" setup>
const ticketPrice = "https://shq.qdjqy.cn/profile/0911/scenicDetail/ticket_price.png"
const swipterImg = "https://shq.qdjqy.cn/profile/0911/scenicDetail/swipter.png"
const detailInfo = "https://shq.qdjqy.cn/profile/0911/scenicDetail/detailInfo.png"

const icon_1 = "https://shq.qdjqy.cn/profile/0911/index/icon_1.png"
const icon_2 = "https://shq.qdjqy.cn/profile/0911/index/icon_2.png"
const icon_3 = "https://shq.qdjqy.cn/profile/0911/index/icon_3.png"
const icon_4 = "https://shq.qdjqy.cn/profile/0911/index/icon_4.png"


definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

function showImg() {
  // uni.previewImage({
  //   urls: [swipterImg], // 图片路径数组
  //   current: swipterImg // 当前显示的图片
  // });
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '预约须知' },
  { title: '温馨提示' },
  { title: '景区简介' }
])

function handleChange(event: any) {
  tab.value = event.index;
}

</script>

<template>
  <view class="scenic-container">
    <wd-navbar left-arrow @click-left="handleClickLeft"
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
      :duration="500">
      <swiper-item>
        <image :src="swipterImg" class="swiper-img" mode="scaleToFill" @click="showImg"></image>
      </swiper-item>
    </swiper>

    <view class="title"></view>
    <veiw class="scenic-title">青岛融创乐园（山东融创5选1）</veiw>
    <view class="ticket flex">
      <veiw class="ticket-img">
        <image class="ticket-img2" :src="ticketPrice"></image>
        <span class="ticket-price">￥100.00</span>
      </veiw>
      <veiw class="ticket-text">可游玩次数共 1 次</veiw>
    </view>
    <view class="open flex">
      <view class="open-status">开园中</view>
      <view class="open-time">周一至周四: 11:00-19:00; 周五至周日: 10:30-20:00</view>
    </view>
    <view class="address flex">
      <view class="address-tit">青岛市黄岛区滨海大道2777号融创茂12号楼1单元302</view>
      <view class="address-info flex">
        <view class="address-li flex">
          <image class="address-li-img" :src="icon_1"></image>
          <view class="address-li-txt">地图</view>
        </view>
        <view class="address-li flex">
          <image class="address-li-img" :src="icon_2"></image>
          <view class="address-li-txt">电话</view>
        </view>
      </view>
    </view>

    <view class="preview flex">
      <view class="pre-info flex">
        <image class="pre-img" :src="icon_3"></image>
        <view class="pre-tit">全景浏览</view>
      </view>
      <view class="pre-info flex">
        <view class="pre-tit2">暂未开放</view>
        <image class="pre-img2" :src="icon_4"></image>
      </view>
    </view>

    <view class="goodlist">
      <wd-tabs v-model="tab" @change="handleChange" 
        inactive-color="#6D2E19" color="#85523E" background="transparent">
        <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`">
          <view class="goodlist-info">
            <image :src="detailInfo" mode="widthFix"></image>
          </view>
        </wd-tab>
      </wd-tabs>
    </view>

    <veiw class="bottom1">
      <wd-button type="error" custom-class="custom-shadow">立即预约</wd-button>
    </veiw>
  </view>
</template>

<style lang="scss" scoped>
.scenic-container {
  position: relative;  
  & .swiper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
		height: 430rpx;
    width: 750rpx;
    & .swiper-img {
      width: 750rpx;
      height: 100%;
    }
	}

  & .title {
    margin-top: 240rpx;
    width: 750rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;
    height: 30rpx;
  }

  & .scenic-title {
    width: 670rpx;
    line-height: 60rpx;
    margin: 0 40rpx;
    font-weight: 600;
    font-size: 38rpx;
    color: #08080A;
    overflow: hidden; /* 隐藏超出容器的文本 */
    white-space: nowrap; /* 保持文本在一行内显示 */
    text-overflow: ellipsis;
  }

  & .ticket {
    width: 670rpx;
    margin: 20rpx 40rpx;
    font-size: 28rpx;
    & .ticket-img {
      width: 240rpx;
      height: 44rpx;
      vertical-align: top;
      position: relative;
      & .ticket-img2 {
        width: 240rpx;
        height: 44rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
      }
      & .ticket-price {
        margin-left: 90rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #4D526C;
        line-height: 44rpx;
        display: inline-block;
      }
    }
    & .ticket-text {
      margin-left: 30rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #FF221E;
      line-height: 48rpx;
    }
  }

  & .open {
    width: 670rpx;
    margin: 20rpx 40rpx;
    font-size: 28rpx;
    & .open-status {
      width: 120rpx;
      line-height: 40rpx;
      color: #00C67E;
    }
    & .open-time {
      line-height: 40rpx;
      color: #08080A;
    }
  }
  
  & .address {
    width: 670rpx;
    margin: 20rpx 40rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    justify-content: space-between;
    & .address-tit {
      overflow: hidden; /* 隐藏超出容器的文本 */
      white-space: nowrap; /* 保持文本在一行内显示 */
      text-overflow: ellipsis;
      width: 400rpx;
    }
    & .address-info {
      width: 200rpx;
      justify-content: space-between;
      & .address-li {
        & .address-li-img {
          width: 40rpx;
          height: 40rpx;
        }
        & .address-li-txt {
          width: 60rpx;
        }
      }
    }
  }

  & .preview {
    width: 670rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin: 30rpx 40rpx;
    font-size: 28rpx;
    justify-content: space-between;
    background: #FBF0E8;
    border-radius: 12rpx;
    & .pre-info {
      padding: 0 30rpx;
      & .pre-img {
        width: 36rpx;
        height: 36rpx;
        vertical-align: top;
        margin-top: 22rpx;
      }
      & .pre-tit {
        margin-left: 15rpx;
        color: #5E371F;
      }
      & .pre-img2 {
        width: 20rpx;
        height: 20rpx;
        vertical-align: top;
        margin-top: 32rpx;
        color: #aaa;
      }
      & .pre-tit2 {
        margin-right: 10rpx;
        color: #aaa;
      }
    }
  }

  & .goodlist {   
    & .goodlist-info {
      width: 710rpx;
      margin: 30rpx auto;
    }
  }

  & .bottom1 {
    :deep() {
      .custom-shadow {
        margin: 50rpx 30rpx;
        height: 90rpx;
        width: 690rpx;
        font-size: 28rpx;
        background: linear-gradient(90deg, #FF441D 0%, #EE2522 100%);
      }
    }
  }

  :deep() {}
}




</style>
